<template>
    <div>
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>考勤管理</el-breadcrumb-item>
                <el-breadcrumb-item>签退</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <hr style="border: 1px solid #F2F6FC;">
        <h1>当前时间：</h1><br>
        <h2>{{ times }}</h2>
        <div class="signInbt">
            <el-button type="success" icon="el-icon-check" circle style="width: 200px;height: 200px;" @click="handleclick">签退</el-button>
        </div>
    </div>
</template>

<script>
import { attendanceOff } from '@/api/api'
export default {
  data () {
    return {
      userId: this.$store.state.userId,
      nowTime: '',
      times: ''
    }
  },
  mounted () {
    this.nowTime = new Date().getTime()// 1637120820767
    // const d = new Date(g) // 创建一个指定的日期对象
    // console.log(d)
    // console.log(this.formatDate(d))
    this.getTimes()
  },
  methods: {
    // formatDate (now) {
    //   // 返回2020-1-1格式
    //   const year = now.getFullYear() // 取得4位数的年份
    //   const month = now.getMonth() + 1 // 取得日期中的月份，其中0表示1月，11表示12月
    //   const date = now.getDate() // 返回日期月份中的天数（1到31）
    //   const hour = now.getHours() // 返回日期中的小时数（0到23）
    //   const minute = now.getMinutes() // 返回日期中的分钟数（0到59）
    //   const second = now.getSeconds() // 返回日期中的秒数（0到59）

    //   return (year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second)
    // },
    getTimes () {
      setInterval(this.getTimesInterval, 1000)
    },
    getTimesInterval: function () {
      const year = new Date().getFullYear() // 获取当前时间的年份
      const month = new Date().getMonth() + 1 // 获取当前时间的月份
      const day = new Date().getDate() // 获取当前时间的天数
      let hours = new Date().getHours() // 获取当前时间的小时
      let minutes = new Date().getMinutes() // 获取当前时间的分数
      let seconds = new Date().getSeconds() // 获取当前时间的秒数
      // 当小于 10 的是时候，在前面加 0
      if (hours < 10) {
        hours = '0' + hours
      }
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      if (seconds < 10) {
        seconds = '0' + seconds
      }
      // 拼接格式化当前时间
      this.times = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
    },
    handleclick () {
      this.nowTime = new Date().getTime()// 1637120820767
      const params = {
        userId: this.userId,
        offTime: this.nowTime
      }
      //   console.log(this.nowTime)
      attendanceOff(params).then(res => {
        if (res.data.code !== 200) {
          this.$alert(res.data.msg, '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${action}`
              })
            }
          })
        }
      })
    }
  },
  beforeDestroy () {
    if (this.times) {
      clearInterval(this.getTimesInterval)
    }
  }
}
</script>

<style lang="scss" scoped>
.signInbt{
    width: auto;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.breadcrumb {
  margin: 0px 0px 20px 0px;
}

</style>
